// 头部排版
import React,{useState} from 'react'
import './design_top.css'
import { Cell, Dialog  } from 'react-vant'
import online from "../../assets/simg/online.png"
import VIP from "../../assets/simg/VIP.png"
import Remark from './remark/remark'
import HelpCenter from './HelpCenter/HelpCenter'
import Download from './download/download'
const design_top: React.FC = () => {
    const [inputValue, setInputValue] = useState('');
    const [link, setLink] = useState('');

  const handleCopyLink = () => {
    navigator.clipboard.writeText(link).then(() => {
      alert('链接已成功复制');
    }, () => {
      alert('复制链接失败');
    });
  };
    return (
        <div className='design_top'>
            <div className='design_top_left'>
                <img src={online} alt="" />
                <span>文件</span>
                <span>视图</span>
                <span>
                      <i className='iconfont icon-shangyibu'></i>
                </span>
                <span>
                      <i className='iconfont icon-xiayibu'></i>
                </span>
                <span>
                     <i className='iconfont icon-yibaocun'></i>
                </span>
                <span>
                    <Remark></Remark>
                </span>
                <div style={{position:'relative',left:'50px'}}>
                <HelpCenter></HelpCenter>
            </div>
            </div>


            <div className='design_top_right'>
                <img src={VIP} alt="" />
                <span style={{fontSize:'14px'}}>加入会员</span>
                
                <button className='btn1' style={{display:'flex'}}>
                    <Cell className='btn11'
                        title='分享'
                        isLink
                        onClick={() =>
                        Dialog.confirm({
                            title: '分享你的设计',
                            message: (
                        <div>
                            <p>获得链接的人都可以查看你的设计</p>
                            <input 
                                value={inputValue} 
                                onChange={(e) => setInputValue(e.target.value)} 
                                placeholder="https://react-vant.3lang.dev/components/dialog#props" 
                            />
                            <button onClick={handleCopyLink}>复制链接</button>
                        </div>
                    ),
                            onCancel: () => console.log('cancel'),
                            onConfirm: () => console.log('confirm'),
                        })
                        }
                >   
                    </Cell>
                </button>
                
                <button className='btn2'>
                    <Download></Download>
                </button>
            </div>
        </div>
    )
}

export default design_top
